<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物招领系统 - 帖子详情</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/system/css/all.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/system/css/select2.min.css}">
    <!--外观-->
    <link rel="stylesheet" th:href="@{/system/css/adminlte.min.css}">
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/system/css/toastr.min.css}">
    <style>
        .btn-green{
            border-color: #2ad7c6;
            color: #2ad7c6
        }
        .btn-green:hover{
            background-color: #19c4b3;
            border-color: #19c4b3;
            color: #FFFFFF;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/system/header::header-nav"></div>
    <div th:replace="pc/system/header::header-nav-model"></div>
    <!-- 主页 -->
    <div class="row" style="margin-top: 20px; justify-content: center">
        <div class="card card-widget card-outline card-primary" style="width: 700px; border-top: 3px solid #ffc107">
            <div class="card-header" style="display: flex">
                <div>
                    <h4 id="postTitle"></h4>
                    <span id="addressCategoryName" style="opacity: 0.7"></span>
                    &nbsp;&nbsp;
                    <span id="createTime" style="opacity: 0.7"></span>
                    &nbsp;&nbsp;
                    <span id="petCategoryName" style="color: #ffc107"></span>
                    &nbsp;&nbsp;
                    <span id="postTypeName"></span>
                    &nbsp;&nbsp;
                    <span style="opacity: 0.7">
                        <i class="fas fa-eye"></i>
                        <span id="views"></span>
                    </span>
                </div>
                <!-- 联系ta -->
                <div class="card-tools" style="display:flex; margin-left: auto; align-items: center">
                    <div>
                        <th:block th:if="${session.user}">
                            <th:block th:if="${session.user.userId} == ${petPostDetailVO.userId}">
                                <button class="btn btn-outline-danger"
                                        data-toggle="modal" data-target="#modal-danger">
                                    <i class="nav-icon fa fa-minus"></i>
                                    删除
                                    <span id="postId" style="display: none"></span>
                                </button>
                            </th:block>
                            <th:block th:unless="${session.user.userId} == ${petPostDetailVO.userId}">
                                <button class="btn btn-green" id="contact">
                                    <i class="fas fa-comment"></i>
                                    联系Ta
                                    <span id="userId" style="display: none"></span>
                                </button>
                            </th:block>
                        </th:block>
                        <th:block th:unless="${session.user}">
                            <button class="btn btn-green" id="login">
                                <i class="fas fa-comment"></i>
                                联系Ta
                            </button>
                        </th:block>
                    </div>
                </div>
            </div>
            <!-- 删除弹框 -->
            <div class="modal fade" id="modal-danger">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content bg-danger">
                        <div class="modal-header">
                            <h4 class="modal-title">删除确认</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>确定&quot;删除&quot;宠物信息吗？</p>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-outline-light" data-dismiss="modal">
                                取消
                            </button>
                            <button type="button" class="btn btn-outline-light" data-dismiss="modal" id="delete">
                                确认
                            </button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div id="images">
                    <h5 id="textContent" style="margin-bottom: 15px"></h5>
                    <img id="mainImage" alt="主图"
                         style="width: 100%; height: auto; margin-bottom: 10px; border-radius: 10px" src="">
                </div>
                <div style="display: flex; justify-content: center">
                    <button id="share" class="link-black mr-2" style="border: 0; background-color: #FFFFFF">
                        <i class="fas fa-share mr-1"></i> 分享
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- model -->
    <div class="modal fade" id="modal-contact">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="background-color: #2ad7c6; color: #FFFFFF">
                <div class="modal-header">
                    <h5 class="modal-title">
                        请勿故意骚扰他人！
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center" style="display: flex; justify-content: center">
                        <div style="width: 100px; height: 100px">
                            <img id="profile" class="profile-user-img img-fluid img-circle w-100 h-100"
                                 src=""
                                 alt="User profile picture">
                        </div>
                    </div>
                    <h3 id="userName" class="profile-username text-center"></h3>
                    <h3 id="userIntroduction" class="profile-username text-center"></h3>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<!-- jQuery -->
<script th:src="@{/system/js/jquery.min.js}"></script>
<script th:src="@{/system/js/clipboard.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/system/js/bootstrap.bundle.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/system/js/select2.full.min.js}"></script>
<!-- Bootstrap Switch -->
<script th:src="@{/system/js/bootstrap-switch.min.js}"></script>
<!-- Toastr -->
<script th:src="@{/system/js/toastr.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/system/js/adminlte.js}"></script>
<!-- 自己 -->
<script th:src="@{/system/js/header.js}"></script>
<script th:inline="javascript">
    var post = [[${petPostDetailVO}]]; //
    $('#postTitle').text(post.postTitle);
    $('#addressCategoryName').text(post.addressCategoryName);
    $('#createTime').text(post.createTime);
    $('#petCategoryName').text(post.petCategoryName);
    if (post.postTypeName === '丢失') {
        $('#postTypeName').css('color', '#dc3545').text(post.postTypeName);
    } else {
        $('#postTypeName').css('color', '#17a2b8').text(post.postTypeName);
    }
    $('#views').text(post.views);
    $('#textContent').text(post.textContent);
    $('#mainImage').attr('src', post.mainImageUrl);
    if (post.otherImageUrls !== '') {
        let urls = post.otherImageUrls.split(' ');
        let images = $('#images');
        for (let i = 0; i < urls.length; i++) {
            let img = $('<img>').attr('src', urls[i]).css({
                'width': '100%',
                'height': 'auto',
                'margin-bottom': '10px',
                'border-radius': '10px'
            });
            images.append(img);
        }
    }
    $('#userId').text(post.userId);
    $('#postId').text(post.postId);
</script>
<script th:src="@{/system/js/post_detail.js}"></script>
</body>
</html>